<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com">
        <input type="text" name="username">
        <input type="password" name="password">
        <button>提交</button>
    </form>
    <script>
        // 查询字符串 

        // 上面的表单 输入内容之后 提交 
        // 在浏览器的地址栏呈现下面的内容
        // https://www.baidu.com/?username=lihao6&password=lihao6

        // 上面这种形式的内容  就是查询字符串 
        // 下面是百度中搜索一个关键字  地址栏中的信息  也是查询字符串  

        //https://www.baidu.com:443/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E8%94%A1%E5%BE%90%E5%9D%A4&fenlei=256&oq=%25E5%25A8%25B1%25E4%25B9%2590%25E6%2589%2593%25E7%25AF%25AE%25E7%2590%2583%25E7%259A%2584%25E9%2587%258C%25E8%25BE%25B9%25E5%2594%25B1rap%25E6%259C%2580%25E5%25A5%25BD%25E7%259A%2584%25E6%2598%25AF%25E8%25B0%2581&rsv_pq=e283be6b0010f1aa&rsv_t=9911Qm0KL8HQNp%2BiAcjk3rBgU5djutdkasTzt4jcEeQkJJEvg8BeiSFiqxI&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1704&rsv_sug3=84&rsv_sug1=52&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1704&rsv_sug=1#abc



        // 查询字符串  也是字符串  
        // 一种字符串的格式 
        // 组成部分:

        //http(s)://  传输协议
        // www.baidu.com  域名 
        // 443 端口号   http 80  https 443   不写默认就是这些端口号 
        // 只有80  443 可写可不写  其它的端口号 必须写
        // /s  路径    http://www.qfedu.com/html5   http://www.qfedu.com/java 
                      // html5表示 用户访问html5主页 
                      // java 表示用户访问java主页
        // ie=utf-8&f=8 这就是查询字符串   键=值&键=值  相当于带给页面的一些信息 
        //  服务器收到这些信息 用来判断  
        // #abc  锚点

        // document.write('<p style="color:red">勿忘国耻77事变周年</p>')


        // js 把字符串进行了以下分类 

        // 普通字符串 '威尔特与思电饭锅和adsb!#$%^&*()'
        // 数字字符串 '123345'
        // html格式字符串 '<p style="color:red">勿忘国耻77事变周年</p>'
        // 查询字符串 'username=mengzhiyuan&password=123456'
            // key=value
            //  &

        
        //key value  在js中 用 对象来体现 

        // 访问一个网页 需要查询字符串  



        // js对象 和 查询字符串之间转换 
        // 'ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu'
        // http://www.baidu.com/s? + 'ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu'


        var obj = {
            ie:"utf-8",
            f:8,
            rsv_bp:1,
            rsv_idx:1,
            tb:'baidu'
        }

        // 对象转查询字符串  
        var str = ''; // 准备一个初始值 用来拼接
        for(var k in obj){
            str += `${k}=${obj[k]}&`;
        }

        // console.log(str); //ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tb=baidu&
        str = str.slice(0,-1);
        // console.log('http://www.baidu.com:443/s'+'?'+str);


        // ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tb=baidu 如何转成对象
        // 先用& 切割 得到一个数组
        // 对数组进行遍历 拿到每个元素  再用=切割  得到一个数组 
        // 新数组的[0] 作为键   新数组的[1]作为值  放到对象中
        

        var new_obj = {};

        // new_obj['ie'] = 'utf-8'
        var res1 = str.split('&');
        // console.log(res1);//['ie=utf-8', 'f=8', 'rsv_bp=1', 'rsv_idx=1', 'tb=baidu']
        res1.forEach(function(item){
            // item ie=utf-8
            var res2 = item.split('=');
            // console.log(res2);
            // console.log(res2[0],res2[1])
            new_obj[res2[0]] = res2[1]
        })

        console.log(new_obj);

    </script>
</body>
</html>